<template>
  <div class="main-container">
    <!-- tab导航 -start-->
    <slot v-if="xTabs == 'custom'" name="page-tabs" />
    <edu-page-tabs v-else :tab-list="xTabs">
      <!-- <template> -->
      <!-- 操作按钮 -start-->
      <!-- <div class="secret-item">
          <i class="edu-icon-shezhihover"></i>
          配置
        </div>
        <div class="secret-item">
          <i class="edu-icon-dingdan"></i>
          查看帮助
        </div> -->
      <!-- 操作按钮 -end-->
      <!-- </template> -->
    </edu-page-tabs>
    <!-- tab导航 -end-->

    <!-- 搜索 start -->
    <edu-page-search :options="searchOptions" :custom-components="searchCustomComponents">
      <template v-slot:page-button>
        <slot name="page-button" />
      </template>
    </edu-page-search>
    <!-- 搜索 end-->

    <!-- 表格 start-->
    <edu-page-table
      :doactions="doactions"
      :checkbox-item="checkboxItem"
      :pagination="pagination"
      :custom-components="customComponents"
      :tree="tree"
      :tree-props="treeProps"
      :lazy="lazy"
      :lazy-fun="lazyFun"
      :row-key="rowKey"
      :draggable="draggable"
    >
      <!-- <template v-slot:doaction="scope">
        <slot name="doaction" :row="scope.row"></slot>
      </template> -->
      <template v-slot:table-button="scope">
        <slot name="table-button" :rows="scope.rows" />
      </template>
    </edu-page-table>
    <!-- 表格 end-->
  </div>
</template>
<script>
import EduPageTabs from './tabs/page_tabs.vue';
import EduPageSearch from './page_list/search.vue';
import EduPageTable from './page_list/table.vue';
export default {
  components: {
    EduPageTabs,
    EduPageSearch,
    EduPageTable
  },
  props: {
    xUri: {
      type: String,
      required: true
    },
    xParams: {
      type: Object,
      default: _ => {
        return {};
      }
    },
    xTabs: {
      type: [Array, String],
      default: 'custom'
    },
    // 搜索配置
    searchOptions: {
      type: Object,
      default: _ => {
        return {};
      }
    },
    searchCustomComponents: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 自定义组件
    customComponents: {
      type: Object,
      default: () => {
        return {};
      }
    },
    doactions: {
      type: Array,
      default: _ => {
        return [];
      }
    },
    // 是否为树形结构列表
    tree: {
      type: Boolean,
      default: false
    },
    // 树形节点配置
    treeProps: {
      type: Object,
      default: () => {
        return { children: 'children', hasChildren: 'hasChildren' };
      }
    },
    lazy: {
      type: Boolean,
      default: false
    },
    lazyFun: {
      type: Function,
      default: _ => {}
    },
    // 是否显示多选
    checkboxItem: {
      type: Boolean,
      default: true
    },
    // 是否显示分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 每条数据key值标识
    rowKey: {
      type: String,
      default: 'id'
    },
    // 是否需要拖动
    draggable: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.$store.dispatch('pageList/page', { uri: this.xUri, params: this.xParams });
  }
};
</script>
